<template>
	<view class="">
		<view class="eqbg">
			<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
			<view class="tabs">
				<image src="../../static/back.png" mode="" @click="back"></image>
				<view class="tabs_right">
					<u-tabs :list="list1" :scrollable='false' lineColor='#FB6C04' lineHeight='4' lineWidth='18'
						@click="handleTabs"></u-tabs>
				</view>
			</view>
			<view class="" v-if="!activeTab">
				<view class="addlist flex-between">
					<view class="addlist_left">
						<view class="navlist" v-for="(item,index) in navlist" :key="index"
							:class="isnav==index?'islist':''" @click="clickItem(item,index)">{{item.name}}</view>
					</view>
					<image src="../../static/addeq.png" mode="" @click="$fun.jump(`./addfacility`)"></image>
				</view>
				<view class="group flex-between">
					<view class="group_left flex" @click="changeActiveName('GroupList')">
						<view class="">{{activeName}}({{count}}台)</view>
						<image src="../../static/down.png" mode=""></image>
					</view>
					<view class="group_right" @click="$fun.jump(`./group`)">
						分组管理
					</view>
				</view>
				<view class="earnings flex">
					<view class="">总收益 {{equipmentInfo.totalIncome}}</view>
					<view class="" style="margin-left: 50rpx;">昨日收益 {{equipmentInfo.yesterIncome}}</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="group flex-between" style="justify-content: flex-end;height: 70rpx;margin-bottom: 0;">
					<view class="group_right" @tap="handleDial">
						拨号设置
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" v-if="!activeTab" :style="'height: '+scrollheight+'px;'">
			<u-empty mode="data" v-if="!list.length" text="暂无设备"></u-empty>
			<view class="eqlist">
				<view class="eqlist_goods" v-for="(item,index) in list" :key="index"
					@click="jump(`/pageC/equipmentProfit?name=${item.sn}&onlineCode=${item.onlineCode}`)">
					<view class="left">
						<view class="">
							<image class="img1" :src="$fun.imgUrl(item.image)" mode=""></image>
						</view>
						<view class="">
							<image class="img2" src="../../static/eq(3).png" mode=""></image>
							<!-- <image class="img2" src="../../static/eq(2).png" v-if="item.come_from==1" mode=""></image> -->
						</view>
					</view>
					<view class="right">
						<view class="righttop">
							<image src="../../static/staus(4).png" v-if="item.onlineCode==0" mode=""></image>
							<image src="../../static/staus(3).png" v-else-if="item.onlineCode==1" mode=""></image>
							<image src="../../static/staus(5).png" v-else mode=""></image>
							<view class="">{{item.addrIspCode}}</view>
						</view>
						<view class="right_sn">{{item.sn}}</view>
						<view class="isname">总收益</view>
						<view class="isnum">￥{{item.totalIcome}}</view>
						<view class="rightbot">
							<view class="wid" v-if="item.yesterIncome">
								<view class="isname">昨日收益</view>
								<view class="">￥{{item.yesterIncome}}</view>
							</view>
							<view class="wid">
								<view class="isname">今日收益</view>
								<view class="iscol">￥{{item.income}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" v-else :style="'height: '+scrollheight1+'px;'">
			<u-empty mode="data" v-if="!list.length" text="暂无设备"></u-empty>
			<view class="eqlist">
				<view class="">
					<view class="eqlist_goods" style="height: 100%;" v-for="(item,index) in list" :key="index"
						@click="jump(`/pageC/equipmentProfit?name=${item.sn}&onlineCode=${item.onlineCode}`)">
						<view class="left" style="position: relative;">
							<view class="">
								<image class="img1" :src="$fun.imgUrl(item.image)" mode=""></image>
							</view>
							<view class="">
								<image class="img2" style="position: absolute;bottom: -30rpx;"
									src="../../static/eq(3).png" mode="">
								</image>
							</view>
						</view>
						<view class="right">
							<view class="righttop">
								<image src="../../static/staus(4).png" v-if="item.onlineCode==0" mode=""></image>
								<image src="../../static/staus(3).png" v-else-if="item.onlineCode==1" mode=""></image>
								<image src="../../static/staus(5).png" v-else mode=""></image>
								<view class="">{{item.addrIspCode}}</view>
							</view>
							<view class="right_sn">{{item.sn}}</view>
							<view class="isname">总收益</view>
							<view class="isnum">￥{{item.totalIcome}}</view>
							<view class="rightbot">
								<view class="wid" v-if='item.yesterIncome'>
									<view class="isname">昨日收益</view>
									<view class="">￥{{item.yesterIncome}}</view>
								</view>
								<view class="wid">
									<view class="isname">今日收益</view>
									<view class="iscol">￥{{item.income}}</view>
								</view>
							</view>
							<!-- <u-line></u-line> -->
							<view class="item-bottom">
								<view class="item-icon"
									@tap.stop="$fun.jump(`/pageC/dialInfo/dialInfo?sn=${item.sn}&netType=${item.netType}`)">
									<view class="">
										<u-icon name="minus-circle" color="#2979ff" size="18"></u-icon>
									</view>
									<view class="item-text">
										调整线路
									</view>
								</view>
								<view class="item-icon" @tap.stop="handleDialResult(item)">
									<view class="">
										<u-icon name="question-circle" color="#2979ff" size="18"></u-icon>
									</view>
									<view class="item-text">
										拨号信息
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
		<u-modal :show="lineModal" title="提示" showCancelButton @cancel="lineModal = false">
			<view class="">是否清退当前线路?</view>
		</u-modal>
	</view>
</template>

<script>
	import headerTop from "@/components/dacizi-headtag/dacizi-headtag.vue"
	export default {
		components: {
			headerTop
		},
		data() {
			return {
				lineModal: false,
				list1: [{
					name: '设备',
				}, {
					name: '多拨号',
				}],
				navlist: [{
						name: '全部'
					},
					{
						name: '在线'
					},
					{
						name: '离线'
					},
					{
						name: '故障'
					}
				],
				isnav: 0,
				equipment: [{
						title: '全部',
						value: '-1',
						color: '#FFFFFF'
					},
					{
						title: '在线',
						value: '0',
						color: '#00FF00'
					},
					{
						title: '离线',
						value: '1',
						color: '#A0A0A0'
					},
					{
						title: '故障',
						value: '2',
						color: '#FF0000'
					},
				],
				equipmentInfo: {
					count: 0
				},
				list: [],
				page: 1,
				limit: 20,
				activeIndex: 0,
				activeName: '全部分组',
				activeType: '',
				group_id: -1,
				pipeType: '',
				GroupList: [],
				GroupType: [],
				count: 0,
				activeTab: 0,
				isAdd: false,
				vlan: -1,
				showmodel: false,
				scrollheight: 0,
				statusBarHeight: 0,
				scrollheight1: 0
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			setTimeout(() => {
				this.getGroupList()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.page != 1) {
				this.getUserSnList(this.page, this.limit)
			}
		},
		onNavigationBarButtonTap(e) {
			this.$fun.jump('/pageC/add')
		},
		// 分享好友
		onShareAppMessage() {
			return {
				title: '火虎智算',
				path: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '火虎智算',
				query: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.getGroupList()
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.scrollheight = uni.getWindowInfo().windowHeight - 180
			this.scrollheight1 = uni.getWindowInfo().windowHeight - 115
		},
		onHide() {
			this.isAdd = false
		},
		methods: {
			btnnav(index) {
				this.isnav = index

			},
			// 拨号信息
			handleDialResult(item) {
				this.$fun.jump(`/pageC/dialResult/dialResult?sn=${item.sn}&netType=${item.netType}`)
			},
			handleAdd() {
				this.$fun.jump('/pageC/add')
			},
			// 拨号设置
			handleDial() {
				this.$fun.jump('/pageC/DialSetting/DialSetting')
			},
			// 点击tabs
			handleTabs(item) {
				this.page = 1,
					this.limit = 20
				if (item.index) {
					this.pipeType = 3
					this.vlan = 1
				} else {
					this.pipeType = -1
					this.vlan = -1
				}
				this.list = []
				this.getUserSnList(this.page, this.limit)
				this.activeTab = item.index
			},
			changeActiveName(str) {
				let data = []
				for (var i = 0; i < this[str].length; i++) {
					data.push(this[str][i].name)
				}
				uni.showActionSheet({
					itemList: data,
					success: (res) => {
						console.log(res)
						if (str == 'GroupList') {
							this.group_id = this.GroupList[res.tapIndex].id
							this.activeName = this.GroupList[res.tapIndex].name
							this.count = this.GroupList[res.tapIndex].num
						} else {
							this.pipeType = this[str][res.tapIndex].id
							this.activeType = this[str][res.tapIndex].name
						}
						this.list = []
						this.page = 1
						this.getUserSnList(this.page, this.limit)
						// this.getGroupList()
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			getUserSnList(page, limit) {
				this.$fun.ajax.post('butt/userSnList', {
					page,
					limit,
					onlineCode: this.equipment[this.activeIndex].value,
					group_id: this.group_id,
					pipeType: this.pipeType,
					vlan: this.vlan
				}).then(res => {
					// console.log(res)
					if (res.data.list.length > 0) {
						this.list.push(...res.data.list);
						// this.addressList = res.data
						this.page++
					} else {
						if (this.page != 1) {
							// this.$fun.msg('没有更多数据了...')
						}
					}
					this.equipmentInfo = res.data
				})
			},
			clickItem(item, index) {
				this.isnav = index
				this.activeIndex = index
				this.list = []
				this.page = 1
				this.getUserSnList(this.page, this.limit)
			},
			async getGroupList(onlineCode = -1) {
				await this.$fun.ajax.post('butt/groupList', {
					onlineCode,
				}).then(res => {
					this.GroupList = res.data
					this.count = res.data[0].num
					this.activeName = res.data[0].name
				})
				await this.$fun.ajax.post('butt/typeList', {
					onlineCode,
				}).then(res => {
					this.GroupType = res.data
					this.activeType = res.data[0].name
					this.pipeType = res.data[0].id
				})
				// await this.$fun.ajax.post('butt/typeList', {
				// 	onlineCode,
				// }).then(res => {
				// 	this.GroupType = res.data
				// 	this.activeType = res.data[0].name
				// 	this.pipeType = res.data[0].id
				// })
				await this.getUserSnList(this.page, this.limit)
			},
			jump(url) {
				this.$fun.jump(url)
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F1EE;
	}

	.eqbg {
		background: #FFFFFF;
	}

	.tabs {
		display: flex;
		align-items: center;
		margin: 0 30rpx;

		&_right {
			width: 500rpx;
			margin-left: 60rpx;
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.addlist {
		width: 750rpx;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&_left {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		image {
			width: 162rpx;
			height: 48rpx;
		}

		.navlist {
			width: 100rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 27rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			line-height: 48rpx;
			text-align: center;
			margin-right: 30rpx;
		}

		.islist {
			width: 100rpx;
			height: 48rpx;
			background: #FB6C04;
			border-radius: 27rpx;
			color: #FFFFFF;
		}
	}

	.group {
		margin: 30rpx 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&_left {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 7rpx;
			}
		}

		&_right {
			line-height: 48rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FB6C04;
			width: 128rpx;
			height: 48rpx;
			background: #FEF0E5;
			border-radius: 48rpx;
		}
	}

	.earnings {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin: 0 30rpx;
		display: flex;
		padding-bottom: 30rpx;
	}

	.model {
		width: 750rpx;
		// height: 384rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;

		&_name {
			width: 750rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}

		&_line {
			width: 750rpx;
			height: 16rpx;
			background: #F1F3F6;
		}
	}

	.eqlist {
		.item-bottom {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			margin-top: 10rpx;
			margin-right: 30rpx;

			.item-icon {
				display: flex;
				align-items: center;

				.item-text {
					margin-left: 5rpx;
				}
			}
		}

		.dial-item {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 10rpx;
			margin-bottom: 20rpx;


		}

		&_goods {
			width: 690rpx;
			height: 314rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 30rpx auto 0;
			display: flex;
			padding: 30rpx;



			.left {
				.img1 {
					width: 140rpx;
					height: 140rpx;
				}

				.img2 {
					width: 120rpx;
					height: 120rpx;
					margin-left: -30rpx;
					margin-top: 20rpx;
				}
			}

			.right {
				margin-left: 30rpx;

				.righttop {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: flex;
					align-items: center;

					image {
						width: 56rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}

				.right_sn {
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
					margin-top: 12rpx;
					margin-bottom: 36rpx;
				}

				.isname {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}

				.isnum {
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}

				.rightbot {
					width: 466rpx;

					.wid {
						width: 48%;
					}

					display: flex;
					justify-content: space-between;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-top: 20rpx;

					.iscol {
						color: #ED4961;
					}
				}

			}
		}
	}
</style>